<!-- 帮我找房 -->
<template>
	<view>
		<view class="yangshi">
			<u-tabs :list="list1" @click="clickname" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle"
				:scrollable="false" lineColor="#0e5642" :lineWidth="70" :lineHeight='2' :itemStyle='{height:"75rpx"}'>
			</u-tabs>
		</view>
		<!--  -->
		<view v-show="activeIndex === 3">
			<view class="henderes">
				<view class="u-m-l-30 u-m-r-30">
					<u--form labelPosition="left" labelWidth="200rpx" :labelStyle="{fontSize:'26rpx',color:'#5f5e5f'}"
						:model="model1" ref="uForm">
						<!-- 首付预算 -->
						<u-form-item label="首付预算(万):" prop="userInfo.name" borderBottom ref="item1">
							<u-search shape="square" searchIcon=' ' bgColor='#fff' :clearabled='false' height='50'
								:showAction='false' v-model="model1.userInfo.name" inputAlign='right'
								@blur='getblur($event,1)' placeholder='请输入预算'>
							</u-search>
						</u-form-item>
						<!-- 几居室 -->
						<u-form-item label="几居室:" prop="userInfo.fang" borderBottom labelWidth="200rpx"
							@click="show = true;" ref="item1">
							<u--input v-model="model1.userInfo.fang" disabled inputAlign='right' disabledColor="#ffffff"
								placeholder="请选择" border="none" placeholderStyle="color:#5f5e5f;fontSize: 24rpx"
								fontSize='26rpx'></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<!-- 房子所在地区 -->
						<u-form-item labelWidth="200rpx" label="房子所在地区:" prop="userInfo.city" borderBottom
							@click="showa = true; " ref="item1">
							<u--input v-model="model1.userInfo.city" disabled inputAlign='right' disabledColor="#ffffff"
								placeholder="请选择" border="none" placeholderStyle="color:#5f5e5f;fontSize: 24rpx"
								fontSize='26rpx'></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<!-- 多大面积 -->
						<u-form-item labelWidth="200rpx" label="多大面积(m²):" prop="userInfo.mian" borderBottom
							ref="item1">
							<u-search shape="square" searchIcon=' ' bgColor='#fff' :clearabled='false' height='50'
								:showAction='false' v-model="model1.userInfo.mian" inputAlign='right'
								@blur='getblur($event,2)' placeholder='请输入面积'>
							</u-search>
						</u-form-item>
					</u--form>
				</view>
			</view>
		</view>
		<!-- 按照总价 -->
		<view v-show="activeIndex === 0">
			<view class="u-p-20 henders">
				<view class="cut1-item">{{params.title}}</view>
				<view class="u-flex u-flex-wrap u-m-t-20">
					<view class="cut2-item" :class="cut1===index?'item-on':''" v-for="(item, index) in list"
						:key="index" @click="cut1=index">
						{{item.label}}
					</view>
				</view>
			</view>
		</view>
		<!-- 第三块 按照佣金 -->
		<view v-show="activeIndex === 1">
			<view class="u-p-20 henders">
				<view class="cut1-item">{{params.title}}</view>
				<view class="u-flex u-flex-wrap u-m-t-20">
					<view class="cut2-item" :class="cut2===index?'item-on':''" v-for="(item, index) in listdata"
						:key="index" @click="cut2=index">
						{{item.label}}
					</view>
				</view>
			</view>
		</view>
		<u-picker :show="show" :columns="actions" @confirm='confirm' :closeOnClickOverlay='true' @cancel="show = false"
			@close='close'></u-picker>
		<u-picker :show="showa" :columns="getcity" keyName='name' :closeOnClickOverlay='true' @cancel="showa = false"
			@close='showa = false' @confirm='getcon'></u-picker>
		<view class="u-abso boxdi">
			<view class="m-mg-lr u-flex u-flex-between boxtap">
				<view class="button-one" @click="getchong">重置</view>
				<view class="button-two " @click="submit">提交筛选</view>
			</view>
		</view>
	</view>


</template>

<script>
	export default {
		props: {
			getcity: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				show: false,
				showa: false,
				activeStyle: {
					color: '#0e5642',
					transform: 'scale(1.05)',
					fontSize: '22rpx'
				},
				inactiveStyle: {
					color: '#606266',
					fontSize: '22rpx'
				},
				cut2: null,
				cut1: null,
				pi1: null,
				pit1: null,
				pi2: null,
				pit2: null,
				params: {
					'title': '价位区间（万）'
				},
				list: [{
						id: 1,
						label: '100万以下'
					},
					{
						id: 2,
						label: '100-200万'
					}, {
						id: 3,
						label: '200-300万'
					}, {
						id: 4,
						label: '300-400万'
					}, {
						id: 5,
						label: '400-500万'
					}, {
						id: 6,
						label: '500-800万'
					}, {
						id: 7,
						label: '800-1000万'
					}, {
						id: 8,
						label: '1000万以上'
					}
				],
				disabled: true,
				model1: {
					userInfo: {
						name: '',
						mian: '',
						fang: '',
						city: ''
					},
				},
				actions: [
					['一室一厅', '两室一厅', '两室两厅', '三室两厅', '四房两厅', '四房三厅', '五房两厅', '五房四厅', '六房两厅']
				],
				activeIndex: 0,
				list1: [
					// 	{
					// 	name: '按照首付',
					// },
					{
						name: '按照总价',
					}, {
						name: '按照佣金'
					}
				],
				listdata: [{
					id: 1,
					label: '1-3万'
				}, {
					id: 2,
					label: '3-5万'
				}, {
					id: 3,
					label: '5-8万'
				}, {
					id: 4,
					label: '8-15万'
				}, {
					id: 5,
					label: '15-20万'
				}, {
					id: 6,
					label: '20-30万'
				}, {
					id: 7,
					label: '30万以上'
				}]
			};
		},
		methods: {
			confirm(e) {
				this.model1.userInfo.fang = e.value[0];
				this.pi1 = e.indexs[0] === 0 ? 1 : (e.indexs[0] === 1 || e.indexs[0] === 2 ? 2 :
					(e.indexs[0] === 3 ? 3 : (e.indexs[0] === 4 || e.indexs[0] === 5 ? 4 : (e.indexs[0] === 6 || e
						.indexs[0] === 7 ? 5 : 6))))
				this.pit1 = e.indexs[0] === 0 || e.indexs[0] === 1 ? 1 : (e.indexs[0] === 5 ? 3 : (e
					.indexs[0] === 7 ? 4 : 2))
				this.show = false;
			},
			getcon(e) {
				this.model1.userInfo.city = e.value[0].name;
				this.showa = false;
			},
			getblur(e, i) {
				if (parseFloat(e).toString() == 'NaN') {
					i === 1 ? this.model1.userInfo.name = '' : this.model1.userInfo.mian = ''
					return uni.$u.toast(`请输入数字`);
				}
			},
			getchong() {
				let model1 = {
					userInfo: {
						name: '',
						mian: '',
						fang: '',
						city: ''
					}
				}
				this.model1 = model1;
				this.cut1 = null;
				this.cut2 = null;
				this.pi1 = null;
				this.pit1 = null;
			},
			clickname(e) {
				// this.activeIndex = e.index; //按照首付隐藏
				this.activeIndex = e.index;
				let model1 = {
					userInfo: {
						name: '',
						mian: '',
						fang: '',
						city: ''
					}
				}
				this.model1 = model1;
				this.cut1 = null;
				this.cut2 = null;
				this.pi1 = null;
				this.pit1 = null;
			},
			async submit() {
				let data = this.model1.userInfo;
				let index = this.activeIndex + 1
				if (data.name != '' || this.cut1 != null || this.cut2 != null) {
					if (index === 0) {
						if (data.name === '') {
							uni.$u.toast('请填写预算');
							return;
						} else if (data.fang === '') {
							uni.$u.toast('请选择几居室');
							return;
						} else if (data.city === '') {
							uni.$u.toast('请选择所在地区');
							return;
						} else if (data.mian === '') {
							uni.$u.toast('请填写面积');
							return;
						}
					}
					let params = {};
					index === 0 ? params = this.model1.userInfo : (index === 1 ? params.name =
						this
						.list[
							this.cut1].label : params.name = this.listdata[this.cut2].label);
					//总价切
					if (index === 1 && this.cut1 === 0) {
						params.price = '1000000以下';
					} else if (index === 1 && this.cut1 === 7) {
						params.pricemax = '10000000以上';
					} else if (index === 1 && this.cut1 < 7) {
						params.price = params.name.split('-')[0] * 10000;
						params.pricemax = params.name.split('-')[1].split('万')[0] * 10000;
					}

					//佣金切换
					if (index === 2 && this.cut2 === 6) {
						params.yongjinmax = 300000;
					} else if (index === 2 && this.cut2 < 6) {
						params.yongjin = params.name.split('-')[0] * 10000;
						params.yongjinmax = params.name.split('-')[1].split('万')[0] * 10000;
					}
					let list = {
						pnum: this.pnum,
						city: params.city,
						room: this.pit1,
						bedroom: this.pi1 <= 5 ? this.pi1 : '',
						bedroommax: this.pi1 > 5 ? '五室以上' : '',
						area: data.mian < 200 ? data.mian : '',
						areamax: data.mian >= 200 ? data.mian : '',
						price: index === 0 && params.name * 10000 < 5000000 ? params.name * 10000 : (
							index === 1 ? params.price : ''),
						pricemax: index === 0 && params.name * 10000 > 5000000 ? params.name *
							10000 : (index === 1 ? params.pricemax : ''),
						yongjin: params.yongjin || '',
						yongjinmax: params.yongjinmax
					};
					for (let var1 in list) {
						if (!list[var1]) {
							delete list[var1];
						}
					}
					this.nextNav('/pages/room/helpRoomList?typu=0&list=' + JSON.stringify(list));
				} else {
					uni.$u.toast('请选择或填写')
				}
			},
			close() {
				this.show = false;
				this.showa = false;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.boxdi {
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		height: 114rpx;
	}

	.boxtap {
		margin-top: 23rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.cut2-item {
		display: inline-block;
		padding: 0 30rpx;
		background-color: #f5f5f5;
		border-radius: 10rpx;
		height: 60rpx;



		line-height: 60rpx;
		margin-left: 30rpx;
		margin-bottom: 20rpx;
	}

	.henders {
		background: #fff;
		margin-left: 10px;
		margin-right: 10px;
		border-radius: 12rpx;
		margin-top: 10px;
	}

	.item-on {
		background-color: #0e5642 !important;
		color: #FFFFFF;
	}

	.yangshi {
		height: 38px;
		background: #fff;
	}

	.henderes {
		background: #fff;
		margin-left: 10px;
		margin-right: 10px;
		border-radius: 12rpx;
		margin-top: 10px;
	}

	.button-one {
		border: 1rpx solid #0e5642;
		width: 40%;
		line-height: 80rpx;
		height: 68rpx;
		line-height: 68rpx;
		text-align: center;
		border-radius: 12rpx;
		color: #0e5642;
	}

	.button-two {
		width: 40%;
		line-height: 80rpx;
		height: 68rpx;
		line-height: 68rpx;
		text-align: center;
		border-radius: 12rpx;
		color: #fff;
		background: #0e5642;
	}

	.button-there {
		color: white;
		border-color: #0e5642;
		border-width: 1px;
		border-style: solid;
		margin-top: 5px;
		line-height: 40px;
		height: 30px;
		margin: 5px;

	}

	.anniu-se {
		width: 606px;
		background: #0e5642;
		height: 30px;
		border-radius: 5px;
		text-align: center;
		line-height: 30px;
	}

	.anniu-seone {
		width: 606px;
		background: #f7eee4;
		height: 30px;
		border-radius: 5px;
		text-align: center;
		line-height: 30px;
	}
</style>
